<!DOCTYPE html>

<html>
<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5P98');</script>
    <!-- End Google Tag Manager -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="Jekyll v{{ jekyll.version }}">

    <link rel="stylesheet"
          href="//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|JetBrains+Mono:400,700,400italic">
    <link rel="stylesheet" href="{{ site.baseurl }}/css/app.css">
    <link rel="icon" type="image/png" sizes="16x16" href="https://jetbrains.com/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://jetbrains.com/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://jetbrains.com/apple-touch-icon.png">
    <link rel="mask-icon" href="https://jetbrains.com/safari-pinned-tab.svg" color="#000000">
    <link href="{{ site.baseurl }}/css/syntax.css" rel="stylesheet">

    {% feed_meta %}
    {% seo %}
</head>

<body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-5P98" style="display:none;visibility:hidden" width="0"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

<div id="root" class="layout">
    <div data-reactroot="" class="layout">
        <div class="app">
            <div class="hamburger _type-close _white header__nav-toggle" title="Show navigation" onclick="toggleMenu(true)">
                <div class="hamburger__icon"></div>
            </div>
            <div class="app__nav">
                <header class="header">
                    <!--<a href="{{ site.baseurl }}/">{{ site.title }}</a>-->
                    <div class="layout__container header__container">
                        <div class="group group--align-left header__title"><a href="{{ site.baseurl }}/">IntelliJ Platform UI&nbsp;Guidelines</a></div>
                    </div>
                </header>
                <div class="nav">
                    <form action="{{ site.baseurl }}/search/" method="get">
                        <input type="text" name="q" id="search-input" placeholder="Search" autocomplete="off">
                        <input type="submit" value="Search" style="display: none;">
                    </form>
                    <ul class="toc-tree nav__toc">
                        {% assign categories = "Controls, Components, Principles, Text, Resources" | split: ", " %}
                        {% assign grouped = site.docs | group_by: 'category' %}
                            {% for category in categories %}
                                {% for group in grouped %}
                                    {% if category == group.name %}
                                        <li class="tree-element toc-tree__node toc-tree__node--level_0">

                                            {% assign items = group.items | sort %}
                                            {% assign expand = false %}

                                            {% for item in items %}
                                                {% if item.url == page.url and item.category == group.name %}
                                                    {% assign expand = true %}

                                                {% endif %}
                                            {% endfor %}

                                            <label class="tree-label toc-tree__title" for="{{ group.name }}">{{ group.name }}</label>
                                            <input class="tree-selector" type="checkbox" {% if expand %} checked {% endif %} id="{{ group.name }}" />


                                            <ul class="toc-tree__nodes-list">
                                                {% for item in items %}
                                                    {% if item.draft %}

                                                    {% else %}
                                                        {% if item.type == "GroupHeader" %}

                                                            <li class="tree-element toc-tree__node toc-tree__node--level_1 ">

                                                            <li class="toc-tree__node toc-tree__node--level_1 {% if item.url == page.url %}toc-tree__title--selected{% endif %}">
                                                                    <div class="toc-tree__title-wrapper">
                                                                        <a href="{{ site.baseurl }}{{ item.url }}" class="toc-tree__title toc-tree__title--link">{{ item.title }}</a>
                                                                    </div>
                                                            </li>

                                                            {% assign subpages = group.items | where:"subpageOf", item.title %}
                                                            {% for subpage in subpages %}
                                                                {% if subpage.draft %}
                                                                {% else %}
                                                                    <li class="toc-tree__node toc-tree__node--level_2 {% if subpage.url == page.url %}toc-tree__title--selected{% endif %}">
                                                                        <div class="toc-tree__title-wrapper">
                                                                            <a href="{{ site.baseurl }}{{ subpage.url }}" class="toc-tree__title toc-tree__title--link">{{ subpage.title }}</a>
                                                                        </div>
                                                                    </li>
                                                                {% endif %}
                                                            {% endfor %}

                                                        {% elsif item.type == "Subpage" %}

                                                        {% else %}
                                                            <li class="toc-tree__node toc-tree__node--level_1 {% if item.url == page.url %}toc-tree__title--selected{% endif %}">
                                                                <div class="toc-tree__title-wrapper">
                                                                    <a href="{{ site.baseurl }}{{ item.url }}"
                                                                       class="toc-tree__title toc-tree__title--link">{{ item.title }}</a></div>
                                                            </li>
                                                        {% endif %}
                                                    {% endif %}
                                                {% endfor %}
                                            </ul>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                    </ul>
                </div>
            </div>

            {% if page.type == "full" %}
            <div class="app__main">
                <div class="app__container full">
                    {{content}}
                </div>
            </div>
            {% else %}
            <div class="app__main">
                <div class="app__container">
                    <main class="app__content">
                        <article class="article article--without-sideblocks"><h1>{{ page.title }}</h1>
                            {% if page.codename != nil %} <codename>{{ page.codename }}</codename>{% endif %}
                            {{content}}
                        </article>
                    </main>
                    <footer class="footer app__footer">
                        <div class="grid-row grid-row--valign-middle grid-row--stretch footer__container footer__container--reduced-right-padding">
                            <div class="grid-col-4">
                                <a href="https://www.jetbrains.com" class="footer__logo"></a>
                                <a href="https://github.com/JetBrains/ui/issues">Report issue</a>
                            </div>
                            <div class="grid-col">
                                <div class="footer__copyright">Copyright &copy; 2000&hairsp;&ndash;&hairsp;2022 JetBrains s.r.o.<!-- /react-text --></div>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script type="text/javascript" src="{{ site.baseurl }}/scripts/retina.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/scripts/anchors.js"></script>

<script type="text/javascript">
    document.getElementsByClassName("app__container")[0].onclick = function () {
        toggleMenu(false);
    };

    function toggleMenu(showMenu) {
        if (showMenu) {
            document.getElementsByClassName("app__nav")[0].style.left = "0px";
        } else {
            document.getElementsByClassName("app__nav")[0].style.left = null;
        }
    }

    $(document).ready(setAnchors);
</script>
</body>
</html>
